<template>
   <h1>数字：{{num}} -- {{ str }} -- {{ uname }} </h1>
   <button @click='setNum'>点击</button>
   <hr>
   <h1>引用类型：{{ o }} </h1>
   <h1>{{arr}}</h1>
   <button @click='setO'>点击</button>
</template>
<!-- // setup作为script的属性 是 setup函数的语法糖 -->
<script setup>
 import {ref} from 'vue'
//  创建一个响应式变量
 let num = ref(0)
 let str = ref('A')
 let uname = ref(null)
 const setNum = ()=>{
  num.value++
  console.log(num.value);
  str.value = 'ABCDEF'[Math.random()*6|0]
  uname.value = '李四'
 }
  // --------------------------
  let o = ref({
    name:"张三",
    age:18
  })
  let arr = ref([1,2,3])
  const setO = ()=>{
    console.log(o.value.age++);
    arr.value.push(100)
  }
</script>
<script>
// 新创建script标签 用于写入name属性;
  export default {
    name:"App"
  }
</script>
